<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 云效产品列表 - 注意图标和颜色完全匹配设计图
const products = [
  { id: 1, name: '工作流', icon: 'C', route: '/workflow', color: '#4A90E2' },
  { id: 2, name: '项目协作', icon: 'X', route: '/project', color: '#4A90E2' },
  { id: 3, name: '效能看板', icon: 'Y', route: '/kanban', color: '#4A90E2' },
  { id: 4, name: '开心消消乐', icon: 'D', route: '/candy-crush', color: '#9013FE' },
  { id: 5, name: '知识库', icon: 'K', route: '/knowledge-bases', color: '#9013FE' },
  { id: 6, name: '通义受码', icon: 'AI', route: '/code', color: '#7B68EE' },
  { id: 7, name: '代码管理', icon: 'C', route: '/git', color: '#4A90E2' },
  { id: 8, name: '流水线', icon: 'F', route: '/pipeline', color: '#4A90E2' },
  { id: 9, name: '制品仓库', icon: 'P', route: '/artifacts', color: '#4A90E2' },
  { id: 10, name: '应用交付', icon: 'A', route: '/delivery', color: '#4A90E2' },
  { id: 11, name: '测试管理', icon: 'T', route: '/testing', color: '#4A90E2' }
]

// 日历数据
const currentDate = new Date()
const calendarDays = ref([])
const weekDays = ['日', '一', '二', '三', '四', '五', '六']

// 我的项目列表
const myProjects = [
  { id: 1, name: '知识库小程序', icon: '📱' },
  { id: 2, name: '经销商平台', icon: '🏪' },
  { id: 3, name: '快应用小程序', icon: '⚡' },
  { id: 4, name: '远程决胜小程序', icon: '🌐', locked: true },
  { id: 5, name: '成本计算', icon: '🧮' }
]

// 初始化日历数据
const initCalendar = () => {
  const year = currentDate.getFullYear()
  const month = currentDate.getMonth()
  const today = currentDate.getDate()
  
  for (let i = 0; i < 7; i++) {
    const date = new Date(year, month, today - 3 + i)
    calendarDays.value.push({
      date: date.getDate(),
      isToday: i === 3,
      hasEvents: Math.random() > 0.7
    })
  }
}

// 添加跳转方法
const handleProductClick = (route) => {
  console.log(route)
  router.push(route)
}

initCalendar()
</script>

<template>
  <div class="nav-header">
    <div class="nav-left">
      <span class="app-name">云效工作台</span>
    </div>
    <div class="nav-right">
      <div class="search-box">
        <input type="text" placeholder="在云效中搜索">
        <span class="shortcut">Ctrl K</span>
      </div>
      <div class="nav-actions">
        <span class="action-item">美国</span>
        <span class="action-item">云效计费账号公告</span>
        <span class="action-item notification">1</span>
        <span class="action-item settings">⚙️</span>
        <span class="action-item avatar">👤</span>
      </div>
    </div>
  </div>

  <div class="page-container">
    <div class="home-container">
      <div class="main-area">
        <div class="welcome-section">
          <h2>早上好，陈联高</h2>
          <button class="modify-btn">修改工作台</button>
        </div>

        <div class="content-area">
          <div class="products-section">
            <h3>云效产品</h3>
            <div class="products-grid">
              <div 
                v-for="product in products" 
                :key="product.id" 
                class="product-item"
                @click="handleProductClick(product.route)"
              >
                <div class="product-icon" :style="{ backgroundColor: product.color }">
                  {{ product.icon }}
                </div>
                <span class="product-name">{{ product.name }}</span>
              </div>
            </div>
          </div>

          <div class="progress-section">
            <div class="milestone-progress">
              <div class="section-header">
                <h3>里程碑进展</h3>
                <span class="more-icon">⋮</span>
              </div>
              <div class="empty-state">
                <div class="empty-icon">📋</div>
                <p>暂无相关信息</p>
                <button class="action-btn">前往设置</button>
              </div>
            </div>

            <div class="delivery-progress">
              <div class="section-header">
                <h3>送代进展</h3>
                <span class="more-icon">⋮</span>
              </div>
              <div class="empty-state">
                <div class="empty-icon">🚚</div>
                <p>暂无相关信息</p>
                <button class="action-btn">前往设置</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="sidebar">
        <!-- 今日工作 -->
        <div class="today-work">
          <div class="section-header">
            <h3>今日工作</h3>
            <button class="add-item-btn">🔄 添加事项</button>
          </div>
          <div class="calendar-grid">
            <div class="weekday" v-for="day in weekDays" :key="day">{{ day }}</div>
            <div 
              v-for="day in calendarDays" 
              :key="day.date"
              :class="['calendar-day', { 'today': day.isToday, 'has-events': day.hasEvents }]"
            >
              {{ day.date }}
            </div>
          </div>
          <div class="work-footer">
            共 0 个事项 | 登记工时 0/8 小时
          </div>
        </div>

        <!-- 我的项目 -->
        <div class="my-projects">
          <div class="section-header">
            <h3>我的项目</h3>
            <div class="header-actions">
              <button class="new-btn">+ 新建</button>
              <span class="view-all">全部</span>
            </div>
          </div>
          <div class="project-list">
            <div v-for="project in myProjects" :key="project.id" class="project-item">
              <span class="project-icon">{{ project.icon }}</span>
              <span class="project-name">{{ project.name }}</span>
              <span v-if="project.locked" class="lock-icon">🔒</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  background: white;
  border-bottom: 1px solid #e8e8e8;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo {
  height: 24px;
}

.app-name {
  font-size: 14px;
  color: #333;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 4px 8px;
}

.search-box input {
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  width: 180px;
}

.shortcut {
  color: #999;
  font-size: 12px;
  padding: 2px 4px;
  background: #e8e8e8;
  border-radius: 2px;
}

.page-container {
  min-height: calc(100vh - 48px);
  background-color: #f5f5f5;
  padding: 24px;
}

.home-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  gap: 24px;
}

.main-area {
  flex: 1;
  min-width: 0; /* 防止flex子项溢出 */
}

.content-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.welcome-section h2 {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.modify-btn {
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: white;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.products-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.products-section h3 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 16px 0;
}

.products-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
}

.product-item {
  flex: 0 0 calc(20% - 10px); /* 每行5个，减去间距 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  cursor: pointer;
}

.product-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.product-name {
  font-size: 13px;
  color: #333;
  text-align: center;
}

.progress-section {
  display: flex;
  gap: 24px;
}

.milestone-progress,
.delivery-progress {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
}

.empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.empty-state p {
  margin: 0 0 16px 0;
  color: #666;
  font-size: 14px;
}

.action-btn {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.sidebar {
  width: 320px;
  flex-shrink: 0;
}

.today-work {
  margin-bottom: 24px;
}

.calendar-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 12px 0;
}

.weekday,
.calendar-day {
  flex: 0 0 calc(100% / 7);
  text-align: center;
  padding: 6px 0;
}

.today {
  background: #1890ff;
  color: white;
}

.work-footer {
  text-align: center;
  color: #666;
  font-size: 12px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.new-btn {
  padding: 4px 8px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.view-all {
  color: #666;
  font-size: 13px;
  cursor: pointer;
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
}

.project-item:hover {
  background: #f5f5f5;
}

.project-icon {
  margin-right: 8px;
}

.project-name {
  font-size: 14px;
  color: #333;
}

.lock-icon {
  margin-left: auto;
  color: #999;
}

.add-item-btn {
  padding: 4px 8px;
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.more-icon {
  color: #666;
  cursor: pointer;
  font-size: 18px;
}
</style>
